<template>
  <div class="outsourcing">
    <el-row :gutter="12" class="rows1" type="flex" justify="space-between">
      <el-col :span="4">
        <el-card class="factory-list-card">
          <div class="title">
            <h3>外协工厂列表</h3>
            <el-input
              v-model="value"
              placeholder="搜索外协工厂"
              prefix-icon="el-icon-search"
            />
            <el-tree
              :data="list"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
            <div class="btns">
              <el-button
                type="primary"
                plain
                @click="manageFactoryList"
              >管理外协厂列表</el-button>
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                @click="addOutsourceVisible = true"
              >
                新建外协工厂
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card>
          <el-row :gutter="10" type="flex" justify="space-between">
            <el-col :span="6">
              <h3>可生产产品列表</h3>
            </el-col>
            <el-col :span="12" style="display: flex; align-content: center">
              <!-- <el-input
                v-model="searchName"
                prefix-icon="el-icon-search"
                placeholder="搜索可产产品类"
                style="margin-right: 10px"
              ></el-input> -->
              <el-select
                v-model="time"
                placeholder="产品大类"
                style="margin-right: 10px"
              >
                <el-option label="" value="" />
              </el-select>
              <el-select
                v-model="time"
                placeholder="二级分类"
                style="margin-right: 10px"
              >
                <el-option label="" value="" />
              </el-select>
              <el-select
                v-model="time"
                placeholder="三级分类"
                style="margin-right: 10px"
              >
                <el-option label="" value="" />
              </el-select>

              <el-button type="primary">搜索</el-button>
              <el-button type="">重置</el-button>
            </el-col>
          </el-row>
          <second-table-list
            :total="total"
            :page-size="page.pageSize"
            :current="page.page"
            @changePage="changePage"
          >
            <my-table
              slot="table"
              :columns="columns"
              :data="tdata"
              :show-selection="false"
              :show-column-setting="false"
            >
              <template v-slot:type="{ row }">
                <el-select v-model="row.typeName" placeholder="">
                  <el-option label="" value="" />
                </el-select>
              </template>
              <template v-slot:count="{ row }">
                <el-input v-model="row.count" placeholder="" />
              </template>
              <template v-slot:action="{ row }">
                <el-button type="text">保存</el-button>
                <el-button type="text" class="danger">删除</el-button>
              </template>
            </my-table>
            <template #footer>
              <el-button type="primary">添加工序</el-button>
            </template>
          </second-table-list>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="factoryListVisible"
      class="factory-list-dialog"
      width="40%"
    >
      <el-row type="flex">
        <el-col :span="6">
          <el-card>
            <h3>管理外协厂列表</h3>
            <el-button type="" icon="el-icon-plus">新增外协工厂</el-button>
            <div class="list">
              <div
                v-for="(item, index) in list"
                :key="index"
                class="item"
                :class="active1 == index ? 'active' : ''"
              >
                {{ item.name }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <div class="never-card">
            <h3>编辑外协工厂</h3>
            <el-form ref="factoryFormRef" :model="factoryForm">
              <el-form-item label="外协工厂名称">
                <el-input v-model="factoryForm.name" placeholder="" />
              </el-form-item>
              <el-form-item label="可生产产品">
                <el-select
                  v-model="factoryForm.product"
                  multiple
                  placeholder=""
                  style="width: 100%"
                >
                  <el-option label="" value="" />
                </el-select>
              </el-form-item>
            </el-form>
            <div class="submit">
              <span class="remove">删除外协工厂</span>
              <el-button type="primary">保存</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <add-outsource v-model="addOutsourceVisible" />
  </div>
</template>

<script>
import secondTableList from '@/components/table/secondTableList'
import myTable from '@/components/table/myTable'
import addOutsource from '@/views/outsourcingManagement/addOutsource'
export default {
  // 这里是名称
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: { secondTableList, myTable, addOutsource },
  props: {},
  data() {
    // 这里存放数据
    return {
      activeName: '1',
      value: '',
      time: '',
      list: [
        {
          label: '外协工厂一',
          children: [
            {
              label: '对应工厂一'
            }
          ]
        },
        {
          label: '外协工厂二',
          children: [
            {
              label: '对应工厂二'
            },
            {
              label: '外协工厂三',
              children: [
                {
                  label: '对应工厂三'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      active: '0',
      searchName: '',
      total: 0,
      page: {
        page: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '外协车间',
          prop: 'type'
        },
        {
          label: '工序',
          prop: 'count'
        },
        {
          label: '设备名称',
          prop: 'amount'
        },
        {
          label: '可用台数',
          prop: 'rest'
        },
        {
          label: '可用台数',
          prop: 'rest'
        },
        {
          label: '日产能/件',
          prop: 'rest'
        },
        {
          label: '日工作时间',
          prop: 'rest'
        },
        {
          label: '工序工时s/件',
          prop: 'rest'
        }
      ],
      tdata: [
        {
          amount: '800'
        }
      ],
      factoryListVisible: false,
      active1: '0',
      factoryForm: {},
      addOutsourceVisible: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成(可以访问当前this实例)
  created() {},
  // 生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能,这个函数会触发
  // 方法集合
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleClickActive(index) {
      this.active = index
    },
    changePage(val) {
      this.page = val
    },
    manageFactoryList() {
      this.factoryListVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.outsourcing {
  width: 100%;
  height: 100%;
  .rows1 {
    height: 100%;
    ::v-deep .el-card {
      height: 100%;
    }
  }
  .factory-list-card {
    ::v-deep .el-card__body {
      padding: unset;
    }
    .title {
      padding: 20px;
    }
    .btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      .el-button {
        width: 100%;
        margin-bottom: 20px;
        margin-left: unset;
      }
    }
  }
  ::v-deep .el-tree-node__content {
    margin: 5px 0;
  }
  ::v-deep .el-tree-node.is-current.is-focusable {
    background: #e8f4ff !important;
    color: $--color-primary;
  }
  .danger {
    color: $--color-danger;
  }
  .factory-list-dialog {
    ::v-deep .el-dialog {
      height: 500px;
    }
    ::v-deep .el-dialog__header {
      padding: unset;
    }
    ::v-deep .el-dialog__body {
      padding: unset;
      height: 100%;
    }
    .el-row {
      height: 100%;
    }
    .el-col {
      height: 100%;
    }
    .el-card {
      height: 100%;
    }
    .list {
      margin: 20px 0;
      .item {
        padding: 14px 20px;
        cursor: pointer;
      }
      .active {
        background: #e8f4ff;
        color: $--color-primary;
      }
    }
    .never-card {
      position: relative;
      height: 100%;
      padding: 20px;
      background: #f3f5f9;
    }
    .submit {
      position: absolute;
      display: flex;
      width: 92%;
      justify-content: space-between;
      align-items: center;
      bottom: 20px;
      .remove {
        color: $--color-primary;
      }
    }
  }
}
</style>
